<template>
  <div>
         <!-- <div id="myChart" style="display:none"></div> -->
         <div ref="chart" class="myChart" ></div>
  </div>
</template>

<script>
// @ is an alias to /src

// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
require('echarts/lib/chart/pie')
require('echarts/lib/chart/line')
require('echarts/lib/component/polar')//极坐标
require('echarts/lib/component/legend')//图例
require('echarts/lib/component/dataZoom')//缩放

// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')


export default {
  name: 'chart',
  props: ['option'],
  data() {
  	return {
      myChart:null,
  	}
  },
  watch: {
    option: {
    handler(newVal, oldVal) {
      console.log(newVal)
      const _this=this
      _this.$nextTick(function () {
           _this.drawLine()
      });
    },
    
    immediate: true
  }
    // option (newVal, oldVal) {
    //   console.log(newVal)
    //   const _this=this
    //   _this.drawLine()
     
    // }
  },
  mounted(){
    // console.log(this.option)
    
  },
  methods: {
    drawLine(){
        console.log('drawLine')
        let _this = this
        _this.myChart = echarts.init(_this.$refs.chart)
        // 绘制图表
        if(_this.option){
            _this.myChart.setOption(_this.option);
        }
        
        //防止重复触发点击事件
        if(_this.myChart._$handlers.click){
            _this.myChart._$handlers.click.length = 0;
        }
        _this.myChart.on('click', function (params) {
          console.log(params)
          _this.$emit('chartClick',params);
        })
    },

  }
}
</script>
<style scoped >
  .main{
    margin:20px 20px 0 240px;
    text-align:left
  }
  .main_container{
    background: #fff;
    border-radius: 5px;border: solid 1px #ccc;
    /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
    height:88vh;
    padding:20px;
  }
  .el-breadcrumb{
    overflow:hidden;
    border-bottom:solid 1px #d4d4d4;
    padding-bottom:10px
  }
  
  .el-breadcrumb::after, .el-breadcrumb::before{
    display:inline
  }
  
  #myChart,.myChart{
    position:absolute;
    top:0;
    left:0;
    width:80%;
    height:74%;
    margin-top:10%;
    margin-left: 10%;
  }
</style>
